<!-- 
*   @Description:
*   @Author:lxy
*   @Date:2023-03-23 10:23
-->
<template>
  <div class="yuBao_box">
    <div class="yuBao_ul" v-for="(item,index) in sevenData" :key="index">
      <div class="yuBao_li_one">
        <span>{{ coverDays(item.fxDate) }}</span>
        <span>{{ convertDate(item.fxDate,3) }}</span>
      </div>
      <i :class='`qi-${item.iconDay}-fill`'></i>
      <div class="yuBao_li_last">
        <span class="yuBao_temp">{{ item.tempMax }}°</span>
        <div class="yuBao_line" :style="{width:(item.tempMax - item.tempMin )*3+'px'}"></div>
        <span class="yuBao_temp">{{ item.tempMin }}°</span>
      </div>
    </div>
  </div>
</template>

<script>
import {convertDate} from '@/components/config/index'
import { sevenDays } from "@/api/requ.js";
export default {
  name: "yuBao",
  data() {
    return {
        sevenData:[],
        sevenWeb:'',
    };
  },
  mounted() {
    this.getSevenDays();
    this.coverDays("2023-04-24")
  },
  methods: {
    convertDate,
    getSevenDays() {
      sevenDays().then((res) => {
        if(res.data.code != 200) return
        this.sevenData = res.data?.daily??[]
        if(this.sevenData.length >= 7){
          this.sevenData = this.sevenData.slice(0,5)
        }
        this.sevenWeb = res.data.fxLink
      });
    },
    //输入日期输出 周几，若是当天则输出今天
    coverDays(date){
      // 一天 = 86500000 毫秒
      let str = ''
      const dayArray = ['日','一','二','三','四','五','六']
      let week = new Date(date).getDay()
      let nowWeek = new Date().getDay()
      if(!week) return
      str = nowWeek == week ? '今天' : `周${dayArray[week]}`
      return str
    }
  },
};
</script>

<style scoped lang="less">
.yuBao_box {
  width: 100%;
  margin-top: 13px;
  border-radius: 10px;
  padding: 20px 15px 15px 15px;
  box-sizing: border-box;
  background-color: #d6dadd59;
  .yuBao_ul{
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .yuBao_li_one{
      display: flex;
      flex-direction: column;
      span{
        font-size: 16px;
        &:last-child{
          font-size: 15.5px;
          color: rgba(0, 0, 0, 0.5);
        }

      }
    }
    i{
      // background-color: #F18360;
      margin:0px 5px 0px 15px;
    }
    .yuBao_li_last{
      width: 205px;
      display: flex;
      align-items: center;
      justify-content: center;
      .yuBao_line{
        height: 7px;
        margin: 0px 4px;
        border-radius: 7px;
        background-image:linear-gradient(to right, #F18360, #427BFF)
      }
    }
  }
}
</style>
